<% include ../public/page_header.html %>
    <!-- Include Editor style. -->
    <link href="/public/admin/wysiwyg-editor-master/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

    <!-- Include Editor JS files. -->
    <script type="text/javascript" src="/public/admin/wysiwyg-editor-master/js/froala_editor.pkgd.min.js"></script>
    <script src="/public/admin/wysiwyg-editor-master/js/languages/zh_cn.js"></script>

    <div class="panel panel-default">
        <div class="panel-heading">
            增加分类
        </div>
        <div class="panel-body">
            <div class="table-responsive input-form">
                <form action="/<%=pathname%>/product/doAdd?_csrf=<%=csrf%>" method="post">
                    <ul>

                        <li>
                            <label class="col-sm-2">菜品分类:</label>
                            <div class="col-sm-10">
                                <select name="cid" id="cid">
                                    <%for(var i=0;i<cateList.length;i++){%>
                                        <option value="<%=cateList[i].id%>"><%=cateList[i].title%></option>
                                    <%}%>
                                </select>
                            </div>
                        </li>

                        <li>
                            <label class="col-sm-2">菜品名称:</label>
                            <div class="col-sm-10">
                                <input type="text" name="title" />
                            </div>
                        </li>

                        <li>
                            <label class="col-sm-2">菜品图片:</label>
                            <div class="col-sm-10">
                                <input type="text" id="files" name="imgUrl">
                                <input type="file" id="file" >
                            </div>
                        </li>

                        <li>

                            <label class="col-sm-2">菜品价格:</label>
                            <div class="col-sm-10">
                                <input type="text" name="price" value="10" /> <i>单位：元</i>
                            </div>
                        </li>

                        <li>
                            <label class="col-sm-2">菜品排序:</label>
                            <div class="col-sm-10">
                                <input type="text" name="sort" value="100" />
                            </div>
                        </li>
                        <li>
                            <label class="col-sm-2"> 菜品状态:</label>
                            <div class="col-sm-10">
                                <input type="radio" name="status" checked value="1" id="a" /> <label for="a">显示</label> &nbsp;&nbsp;
                                <input type="radio" name="status" value="0" id="b" /><label for="b">隐藏</label>
                            </div>
                        </li>
                        <li>
                            <label class="col-sm-2">加入推荐:</label>
                            <div class="col-sm-10">
                                <input type="checkbox" value="1" name="isBest" checked id="is_best"> <label for="is_best">精品</label> &nbsp;&nbsp;
                                <input type="checkbox" value="1" name="isHot" checked id="is_hot"> <label for="is_hot">热销</label>
                            </div>
                        </li>
                        <li>
                            <label class="col-sm-2">菜品详情:</label>
                            <div class="col-sm-10">
                                <textarea name="content" id="content" cols="30" rows="10"></textarea>
                            </div>
                        </li>
                        <li>
                            <br />
                            <button type="submit" class="btn btn-primary">提交</button>
                        </li>
                    </ul>


                </form>
            </div>
        </div>
    </div>
    <script>
        new FroalaEditor('#content', {
            language: 'zh_cn',
            height: 300,
            attribution: false,
            toolbarButtons: [
                ['bold', 'strikethrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html'],
                ['undo', 'redo']
            ],
            toolbarButtonsXS: [
                ['bold', 'strikethrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html'],
                ['undo', 'redo']
            ],
            imageUploadURL: `/<%=pathname%>/product/doUpload?_csrf=<%=csrf%>`
        });
    </script>

<script>
    let file = document.querySelector('#file');
    let files = document.querySelector('#files');
    file.addEventListener('change', function() {
        console.log(this.files); // 显示 FileList {0: File, length: 1}
        let formData = new FormData();//创建 formData实例 
            formData.append('file', this.files[0]); //给formData实例添加一个 表单项  
            console.log(formData);
              $.ajax({
                type: 'post',
                url: `/<%=pathname%>/product/doUpload?_csrf=<%=csrf%>`,
                data: formData,
                processData: false,//告诉jQuery不用处理发送的数据
                contentType: false,//考试jQuery不用设置content-type请求头
                success: function(con) {
                    // con[0].path   //就服务器返回的  图片路径（路径是相对服务器的）
                    console.log(con);
                    files.value = con.link
                },
                error: function(err) {
                    console.log(err) //返回的错误信息
                }
            });
    });
</script>
    </body>

    </html>